<template>
    <div>
        <el-upload
                :action="$http.adornUrl('/admin/file/upload/element')"
                :before-remove="beforeRemove"
                :file-list="fileList"
                :headers="{Authorization: $cookie.get('Authorization')}"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                multiple>
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                resourcesUrl: process.env.VUE_APP_RESOURCES_URL
            }
        },
        props: {
            value: {
                default: '',
                type: String
            }
        },
        computed: {
            fileList() {
                let res = []
                if (this.value) {
                    let fileArray = this.value.split(',')
                    for (let i = 0; i < fileArray.length; i++) {
                        res.push({name: fileArray[i], url: this.resourcesUrl + fileArray[i], response: fileArray[i]})
                    }
                }
                this.$emit('input', this.value)
                return res
            }
        },
        methods: {
            // 图片上传
            handleUploadSuccess(response, file, fileList) {
                let files = fileList.map(file => {
                    return file.response
                }).join(',')
                this.$emit('change', files)
            },
            // 限制图片上传大小
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return isLt2M
            },
            handleRemove(file, fileList) {
                let files = fileList.map(file => {
                    return file.response
                }).join(',')
                this.$emit('change', files)
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`)
            }
        }
    }
</script>

<style lang="scss">
</style>
